<template>
  <t-skeleton :loading="loadingSkeleton" animation="gradient" :row-col="skeletonStyle">
    <!-- 500 -->
    <result v-if="isError" title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦" />
    <t-space v-else direction="vertical" style="width: 100%;">
      <!-- 描述 -->
      <descriptions />
      <!-- 标签栏 -->
      <tab-bar />
      <!-- 记录列表 -->
      <record v-if="clueDetails.selectedTab === '跟进记录'" />
    </t-space>
  </t-skeleton>
</template>

<script setup lang="ts">
import { MessagePlugin, SkeletonRowCol } from 'tdesign-vue-next';
import { onMounted, provide, ref } from 'vue';

import { clueMessageListCRUD, tlClueListCRUD } from '@/api/delivery/clue';
import Result from '@/components/result/index.vue';

import { useTabsRouterStore } from '@/store';
import disposableParams from '@/utils/disposableParams';


import Descriptions from './Descriptions.vue';
import Record from './Record.vue';
import TabBar from './TabBar.vue';
import maskPhone from '@/utils/maskPhone'
import { useRoute } from 'vue-router';

// 标签路由仓库
const tabsRouterStore = useTabsRouterStore();
// route
const route = useRoute();
// props
const props = defineProps({
  // 订单id
  id: {
    type: Number,
    required: true,
  },
});
// 加载骨架屏
const loadingSkeleton = ref(true);
// 骨架屏样式
const skeletonStyle: SkeletonRowCol = [
  { height: '100px' },
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
  ],
  {
    height: '300px',
  },
];
// 订单详情
const clueDetails = ref<Record<string, any>>({});
// 依赖注入
provide<Record<string, any>>('clueDetails', clueDetails);
// 修改标签路由标题
const editTabRouteTitle = () => {
  const tabRoute = tabsRouterStore.tabRouterList.find(
    (item) => item.name === 'ClueDetails' && (Number(item.params.id) === clueDetails.value.id||Number(item.params.id) === clueDetails.value.tlClueId),
  );
  if (tabRoute) {
    tabRoute.title = `${clueDetails.value.name || clueDetails.value.customerName} - ${maskPhone(clueDetails.value.phone) || clueDetails.value.wxCode}`;
  }
};
// 是否错误
const isError = ref(false);
// 处理获取订单详情
const handleGetClueDetails = () => {
  loadingSkeleton.value = true;
  const params = {
    id: props.id,
  };
  const clueDetailsJumpParams = disposableParams.getAll(`clue-details-jump-params-${props.id}`);
  console.log(clueDetailsJumpParams,'clueDetailsJumpParams');
  
    tlClueListCRUD
      .get(params)
      .then((data) => {
        // 订单详情跳转参数
        data.operateType = clueDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = clueDetailsJumpParams.approveType; // 设置审批类型
        clueDetails.value = data;
        console.log(clueDetails.value,'clueDetails');
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
         console.log(clueDetails.value,'clueDetails');
         console.log(isError.value,'isError');
      });
  

};
onMounted(() => {
  handleGetClueDetails();
});
</script>
